style: Light variant fixes and accommodations

- Fixing things where the wrong colors bleed through or the colors are inconsistent.
- expand colors definitions for system colours
- add overrides to styles for overview and lockscreen
- update drawing functions to better use new colours
- rework entry drawing css

Part-of: <https://gitlab.gnome.org/GNOME/gnome-shell/-/merge_requests/2515>

diff --git a/data/theme/gnome-shell-sass/_colors.scss b/data/theme/gnome-shell-sass/_colors.scss
index d2f406b793d7e1834ba1a8489a639d476fbf0c22..8bb3b4b5d93b6a48d1f4f8c7b0e5c46ee0c1e4a2 100644 (file)
--- a/data/theme/gnome-shell-sass/_colors.scss
+++ b/data/theme/gnome-shell-sass/_colors.scss
@@ -5,66 +5,70 @@
 
 $is_highcontrast:false;
 
+// base color for light theme
 $_dark_base_color: desaturate($dark_4, 100%);
 
 $base_color: if($variant == 'light', $light_1, $_dark_base_color);
 $bg_color: if($variant == 'light', $light_2, lighten($base_color, 5%));
-$fg_color: if($variant == 'light', transparentize(black, .2), white);
+$fg_color: if($variant == 'light', $_dark_base_color, white);
 
 $selected_fg_color: $light_1;
 $selected_bg_color: $blue_3;
 $selected_borders_color: if($variant== 'light', darken($selected_bg_color, 15%), darken($selected_bg_color, 20%));
 
-$borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .9));
-$outer_borders_color: if($variant == 'light', rgba(255,255,255,0.8), lighten($bg_color, 5%));
+$borders_color: if($variant == 'light', transparentize($fg_color, .85), transparentize($fg_color, .9));
+$outer_borders_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
 
 $link_color: if($variant == 'light', darken($selected_bg_color, 10%), lighten($selected_bg_color, 20%));
 $link_visited_color: if($variant == 'light', darken($selected_bg_color, 20%), lighten($selected_bg_color, 10%));
 
-$warning_color: if($variant == 'light', $yellow_5, #cd9309);
+$warning_color: if($variant == 'light', $yellow_5, $yellow_3);
 $error_color: if($variant == 'light', $red_3, $red_4);
 $success_color: if($variant == 'light', $green_4, $green_5);
 $destructive_color: $error_color;
 
-$osd_fg_color: $light_1;
-$osd_bg_color: $_dark_base_color; //hardcoded for both light & dark
+// color definitions for OSD elements
+$osd_fg_color: if($variant == 'light', $_dark_base_color, $light_1);
+$osd_bg_color: if($variant == 'light', $light_3, lighten($_dark_base_color, 5%));
+
+// derived osd colors
 $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
-$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%),  mix($osd_fg_color, $osd_bg_color, 70%));
-$osd_borders_color: transparentize(black, 0.3);
-$osd_outer_borders_color: transparentize($osd_fg_color, 0.9);
+$osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%);
+$osd_borders_color: transparentize($osd_fg_color, 0.9);
+$osd_outer_borders_color: transparentize($osd_fg_color, 0.98);
 
-$shadow_color: if($variant == 'light', rgba(0,0,0,0.1), rgba(0,0,0,0.2));
+$shadow_color: if($variant == 'light', rgba(0,0,0,.05), rgba(0,0,0,0.2));
 
-// button
-$button_mix_factor: 9%;
+// buttons
+$button_mix_factor: if($variant == 'light', 12%, 9%);
 
 // notifications
 $bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
 
-// overview background color
-$system_bg_color: $base_color;
+// color definitions for system elements (e.g. the overview)
+$system_base_color: $_dark_base_color; // always dark
+$system_fg_color: $light_2;
+
+// derived system colors
+$system_bg_color: lighten($system_base_color, 5%);
+$system_borders_color: transparentize($system_fg_color, .9);
+$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%);
+$system_overlay_bg_color: mix($system_base_color, $system_fg_color, 90%); // for non-transparent items, e.g. dash
 
-//insensitive state derived colors
-$insensitive_fg_color: mix($fg_color, $bg_color, 50%);
+// derived global colors
+// insensitive state
+$insensitive_fg_color: if($variant == 'light', mix($fg_color, $bg_color, 60%),  mix($fg_color, $bg_color, 50%));
 $insensitive_bg_color: mix($bg_color, $base_color, 60%);
 $insensitive_borders_color: mix($borders_color, $base_color, 60%);
 
-//colors for the backdrop state, derived from the main colors.
-$backdrop_base_color: if($variant =='light', darken($base_color,1%), lighten($base_color,1%));
-$backdrop_bg_color: $bg_color;
-$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
-$backdrop_insensitive_color: if($variant =='light', darken($backdrop_bg_color,15%), lighten($backdrop_bg_color,15%));
-$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
-$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
-
-// derived checked colors
+// checked state
 $checked_bg_color: if($variant=='light', darken($bg_color, 7%), lighten($bg_color, 7%));
 $checked_fg_color: if($variant=='light', darken($fg_color, 7%), lighten($fg_color, 7%));
 
-// derived hover colors
-$hover_bg_color: if($variant=='light', darken($bg_color, 3%), lighten($bg_color, 10%));
-$hover_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 10%));
+// hover state
+$hover_bg_color: if($variant=='light', darken($bg_color,9%), lighten($bg_color, 10%));
+$hover_fg_color: if($variant=='light', darken($fg_color,9%), lighten($fg_color, 10%));
 
-// derived active colors
-$active_bg_color: if($variant=='light', darken($bg_color, 5%), lighten($bg_color, 12%));
-$active_fg_color: if($variant=='light', darken($fg_color, 5%), lighten($fg_color, 12%));
+// active state
+$active_bg_color: if($variant=='light', darken($bg_color, 11%), lighten($bg_color, 12%));
+$active_fg_color: if($variant=='light', darken($fg_color, 11%), lighten($fg_color, 12%));

diff --git a/data/theme/gnome-shell-sass/_common.scss b/data/theme/gnome-shell-sass/_common.scss
index 79c96001f21fe86bcaefebe2dcd758dcf19868b0..953bee598b7f09d18bc78750cdb7cc5fd2960060 100644 (file)
--- a/data/theme/gnome-shell-sass/_common.scss
+++ b/data/theme/gnome-shell-sass/_common.scss
@@ -57,18 +57,6 @@ stage {
 
 /* Common Stylings */
 
-// osd panels
-%osd_panel {
-  color: $osd_fg_color;
-  background-color: $osd_bg_color;
-  border: 1px solid $osd_outer_borders_color;
-  border-radius: 999px;
-  padding: $base_padding*2;
-  @if $is_highcontrast {
-    border: 2px solid $hc_inset_color;
-  }
-}
-
 // icon tiles
 %tile {
   border-radius: $base_border_radius * 2; // 16px
@@ -77,19 +65,24 @@ stage {
   border: 2px solid transparent;
   transition-duration: 200ms;
   text-align: center;
+  color: inherit;
+
   @if $is_highcontrast {
     border-color: $hc_inset_color;
   }
 }
 
 // normal button styling
-%button {
+%button_common {
   border-radius: $base_border_radius;
   border-style: solid;
   border-width: 1px;
   font-weight: bold;
   padding: $base_padding*.5 $base_padding*4;
+}
 
+%button {
+  @extend %button_common;
   @include button(normal);
   &:focus { @include button(focus);}
   &:hover { @include button(hover);}
@@ -111,19 +104,24 @@ stage {
 
 
 // normal entry style
-%entry {
+%entry_common {
   border-radius: $base_border_radius;
   padding: $base_padding*1.5 $base_padding*1.5;
-  color: $fg_color;
   selection-background-color: $selected_bg_color;
   selected-color: $selected_fg_color;
-
-  @include entry(normal);
-  &:hover { @include entry(hover);}
-  &:focus { @include entry(focus);}
-  &:insensitive { @include entry(insensitive);}
 }
 
+%entry {
+  @extend %entry_common;
+  @include entry(normal, $c:$fg_color);
+  &:hover { @include entry(hover, $c:$fg_color);}
+  &:focus { @include entry(focus, $c:$fg_color);}
+  &:insensitive { @include entry(insensitive, $c:$fg_color);}
+
+  StLabel.hint-text {
+    color: transparentize($fg_color, 0.3);
+  }
+}
 
 // buttons in dialogs/notifications
 // lighter in color and have a greater radius
@@ -166,36 +164,21 @@ stage {
   }
 }
 
-// buttons on OSD elements
-// that are undecorated by default and use OSD colors
-%osd_button {
-  @include button(undecorated);
-  &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
-  &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
-}
-
-
 // tooltip
 %tooltip {
-  background-color: $osd_bg_color;
-  color: $osd_fg_color;
-  border:1px solid $osd_outer_borders_color;
+  background-color: transparentize(black, 0.1);
+  color: $light_1;
+
   border-radius: 99px;
   padding: $base_padding $base_padding * 2;
   text-align: center;
 
   @if $is_highcontrast {
-    background-color: $osd_bg_color;
-    color: $osd_fg_color;
-    border: 1px solid $hc_inset_color;
+    border-color: $hc_inset_color;
   }
 }
 
 /* General Typography */
-
 %large_title {
   font-weight: 300;
   @include fontsize(24);
@@ -243,3 +226,68 @@ stage {
 
 %monospace {font-family: monospace;}
 %numeric { font-feature-settings: "tnum";}
+
+
+/* OSD Elements */
+%osd_panel {
+  color: $osd_fg_color;
+  background-color: $osd_bg_color;
+  border: 1px solid $osd_outer_borders_color;
+  border-radius: 999px;
+  padding: $base_padding*2;
+
+  @if $is_highcontrast {
+    border: 2px solid $hc_inset_color;
+  }
+}
+
+// entries
+%osd_entry {
+  @extend %entry_common;
+  @include entry(normal, $c:$osd_fg_color,);
+  &:hover { @include entry(hover, $c:$osd_fg_color,);}
+  &:focus { @include entry(focus, $c:$osd_fg_color,);}
+  &:insensitive { @include entry(insensitive, $c:$osd_fg_color,);}
+
+  StLabel.hint-text {color: transparentize($osd_fg_color, 0.3); }
+}
+
+// buttons on OSD elements
+%osd_button {
+  @extend %button_common;
+  @include button(normal, $tc:$osd_fg_color, $c:$osd_bg_color);
+  &:insensitive { @include button(insensitive, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  &:focus { @include button(focus, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  &:hover { @include button(hover, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  &:active { @include button(active, $tc:$osd_fg_color, $c:$osd_bg_color);}
+  &:outlined,&:checked { @include button(checked, $tc:$osd_fg_color, $c:$osd_bg_color);}
+}
+
+%osd_button_flat {
+  @extend %osd_button;
+  @include button(undecorated);
+  &:insensitive { @include button(undecorated, $tc:$osd_fg_color, $c:$osd_bg_color);}
+}
+
+/* System Elements */
+
+// entries
+%system_entry {
+  @extend %entry_common;
+  @include entry(normal, $c:$system_fg_color,);
+  &:hover { @include entry(hover, $c:$system_fg_color,);}
+  &:focus { @include entry(focus, $c:$system_fg_color,);}
+  &:insensitive { @include entry(insensitive, $c:$system_fg_color,);}
+
+  StLabel.hint-text { color: transparentize($system_fg_color, 0.3);}
+}
+
+// buttons
+%system_button {
+  @include button(normal, $tc:$system_fg_color, $c:$system_bg_color);
+  &:insensitive { @include button(insensitive, $tc:$system_fg_color, $c:$system_bg_color);}
+  &:focus { @include button(focus, $tc:$system_fg_color, $c:$system_bg_color);}
+  &:hover { @include button(hover, $tc:$system_fg_color, $c:$system_bg_color);}
+  &:active { @include button(active, $tc:$system_fg_color, $c:$system_bg_color);}
+  &:outlined,&:checked { @include button(checked, $tc:$system_fg_color, $c:$system_bg_color);}
+}

diff --git a/data/theme/gnome-shell-sass/_drawing.scss b/data/theme/gnome-shell-sass/_drawing.scss
index 80d59cb33441c7d7ebda6b3176a985f672c97b7f..a69d38175cf31c16897ad25fbbce9ae9ed92ce01 100644 (file)
--- a/data/theme/gnome-shell-sass/_drawing.scss
+++ b/data/theme/gnome-shell-sass/_drawing.scss
@@ -23,23 +23,22 @@
   @else { box-shadow: $shadow1; }
 }
 
-// entries
 
-@mixin entry($t, $fc:$selected_bg_color) {
+// Text entries
+@mixin entry($t, $c) {
 //
 // Entries drawing function
 //
 // $t: entry type
-// $fc: focus color
+// $c: text color, used to derive background color of entries
 //
-// possible $t values:
-// normal, focus, insensitive
+// possible $t values: normal, focus, insensitive
 //
   transition-duration: 100ms;
 
   @if $t==normal {
-    background-color: transparentize($fg_color, 0.9);
-    color: transparentize($fg_color,0.3);
+    background-color: transparentize($c, 0.85);
+    color: transparentize($c,0.3);
 
     @if $is_highcontrast {
       box-shadow: inset 0 0 0 1px $hc_inset_color;
@@ -47,20 +46,19 @@
   }
 
   @if $t==focus {
-    background-color: mix(transparentize($fg_color, 0.8), $selected_bg_color, 95%);
-    box-shadow: inset 0 0 0 2px $fc;
-    color: $fg_color;
+    background-color: mix(transparentize($c, 0.75), $selected_bg_color, 95%);
+    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3);
+    color: $c;
     &:hover {}
   }
 
   @if $t==hover {
-    background-color:transparentize($fg_color, 0.8);
-    color: inherit;
+    background-color: transparentize($c, 0.75);
   }
 
   @if $t==insensitive {
-    background-color:transparentize($insensitive_fg_color, 0.8);
-    color: $insensitive_fg_color;
+    background-color:transparentize($c, 0.75);
+    color: transparentize($c, 0.5);
   }
 }
 
@@ -162,44 +160,54 @@
     }
   }
 
+  // focused button
+  @if $t==focus {
+    color: $tc;
+    background-color: mix($button_bg_color, $selected_bg_color, 90%);
+    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
+    &:hover {
+      background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
+      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
+    }
+    &:active {
+      background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
+      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
+    }
+  }
+
   // hover button
   @else if $t==hover {
     color: $tc;
-    background-color: lighten($button_bg_color, 3%);
-    @if $is_highcontrast {
-      box-shadow: inset 0 0 0 1px $hc_inset_color !important;
+    background-color: if($variant == 'light', darken($button_bg_color, 3%), lighten($button_bg_color, 3%));
+
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px lighten($button_inset_color, 3%);
+      background-color: mix(lighten($button_bg_color, 3%), $button_inset_color, 10%);
     }
   }
 
   // active button
   @else if $t==active {
     color: $tc;
-    background-color:  lighten($button_bg_color, 9%);
+    background-color: if($variant == 'light', darken($button_bg_color, 6%), lighten($button_bg_color, 6%));
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px lighten($button_inset_color, 6%);
+      background-color: mix(lighten($button_bg_color, 6%), $button_inset_color, 10%);
+    }
   }
 
   // checked button
   @else if $t==checked {
     color: $tc;
-    background-color: lighten($button_bg_color, 9%);
+    background-color: if($variant == 'light', darken($button_bg_color, 9%), lighten($button_bg_color, 9%));
+    @if $is_highcontrast == "true" {
+      box-shadow: inset 0 0 0 1px lighten($button_inset_color, 9%);
+      background-color: mix(lighten($button_bg_color, 9%), $button_inset_color, 10%);
+    }
     &:hover { background-color: lighten($button_bg_color, 12%);}
     &:active { background-color: lighten($button_bg_color, 15%);}
   }
 
-  // focused button
-  @if $t==focus {
-    color: $tc;
-    background-color: mix($button_bg_color, $selected_bg_color, 90%);
-    box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.4) !important;
-    &:hover {
-      background-color: mix(lighten($button_bg_color, 3%), $selected_bg_color, 90%);
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
-    }
-    &:active {
-      background-color: mix(lighten($button_bg_color, 6%), $selected_bg_color, 90%);
-      box-shadow: inset 0 0 0 2px transparentize($selected_bg_color, 0.3) !important;
-    }
-  }
-
   // insensitive button
   @else if $t==insensitive {
     color: transparentize($tc, 0.5);
@@ -274,17 +282,15 @@
 // overview icon, dash, app grid
 @mixin overview_icon($color, $flat: true) {
   transition-duration: 400ms;
-  .overview-icon { 
+  .overview-icon {
     @extend %tile;
   }
   @if $flat {
     .overview-icon { background-color: transparent;}
   } @else {
-    .overview-icon { 
-      background-color: transparentize($color, .93);
-    }
+    .overview-icon { background-color: transparentize($color, .93); }
   }
-  &:hover .overview-icon { background-color: transparentize($color, .9);}
+  &:hover .overview-icon { background-color: transparentize($color, .87);}
 
   &:selected .overview-icon,
   &:focus .overview-icon {
@@ -319,6 +325,12 @@
   &:hover {@include button(hover);}
   &:active {@include button(active);}
   &:focus {@include button(focus);}
+  &:insensitive {
+    @include button(insensitive);
+    @if $flat {
+     background-color: transparent;
+    }
+  }
 }
 
 // styling for all menuitems in popovers

diff --git a/data/theme/gnome-shell-sass/_high-contrast-colors.scss b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
index 4d9aafdd7e9bcc100c41440c5b9335677f9ca858..dc74a7e88fc8778fbdf76ed1d3b5b0750fa8ed7d 100644 (file)
--- a/data/theme/gnome-shell-sass/_high-contrast-colors.scss
+++ b/data/theme/gnome-shell-sass/_high-contrast-colors.scss
@@ -5,66 +5,70 @@
 
 $is_highcontrast:true;
 
-$base_color: if($variant == 'light', white, black);
+$base_color: if($variant == 'light', $light_1, $dark_5);
 $bg_color: if($variant == 'light', darken($base_color, 10%), lighten($base_color, 10%));
-$fg_color: if($variant == 'light', transparentize(black, .2), white);
+$fg_color: if($variant == 'light', transparentize($dark_5, .2), $light_1);
 
-$selected_fg_color: white;
+$selected_fg_color: $light_1;
 $selected_bg_color: $blue_3;
-
 $selected_borders_color: darken($selected_bg_color, 20%);
+
 $borders_color: if($variant == 'light', transparentize($fg_color, .5), transparentize($fg_color, .7));
 $outer_borders_color: $borders_color;
+
 $link_color: lighten($selected_bg_color,20%);
 $link_visited_color: lighten($selected_bg_color,10%);
 
-$warning_color: if($variant == 'light', $yellow_5, #cd9309);
+$warning_color: if($variant == 'light', $yellow_5, $yellow_3);
 $error_color: if($variant == 'light', $red_3, $red_4);
 $success_color: if($variant == 'light', $green_4, $green_5);
 $destructive_color: $error_color;
 
-$osd_fg_color: white;
+// color definitions for OSD elements
+$osd_fg_color: $light_1;
 $osd_bg_color: $base_color;
+
+// derived osd colors
 $osd_insensitive_bg_color: transparentize(mix($osd_fg_color, opacify($osd_bg_color, 1), 10%), 0.5);
-$osd_insensitive_fg_color: if($variant == 'light', mix($osd_fg_color, $osd_bg_color, 80%),  mix($osd_fg_color, $osd_bg_color, 70%));
+$osd_insensitive_fg_color: mix($osd_fg_color, $osd_bg_color, 70%);
 $osd_borders_color: transparentize($osd_fg_color, 0.8);
 $osd_outer_borders_color: $osd_borders_color;
 
 $shadow_color: rgba(0,0,0,0);
 
-// hc
-$hc_inset_color: transparentize($fg_color, 0.7);
-
 // button
 $button_mix_factor: 20%;
 
 // notifications
 $bubble_buttons_color: if($variant == 'light', darken($bg_color, 7%), lighten($bg_color, 5%));
 
-// overview background color
-$system_bg_color: black;
+// color definitions for system elements
+$system_base_color: $dark_5;
+$system_fg_color: $light_1;
+
+// derived system colors
+$system_bg_color: lighten($system_base_color, 5%);
+$system_borders_color: transparentize($system_fg_color, .9);
+$system_insensitive_fg_color: mix($system_fg_color, $system_bg_color, 50%);
+$system_overlay_bg_color: mix($system_bg_color, $system_fg_color, 90%);
 
-//insensitive state derived colors
+// derived global colors
+// insensitive state
 $insensitive_fg_color: mix($fg_color, $bg_color, 50%);
 $insensitive_bg_color: mix($bg_color, $base_color, 60%);
 $insensitive_borders_color: $borders_color;
 
-//colors for the backdrop state, derived from the main colors.
-$backdrop_base_color: lighten($base_color,1%);
-$backdrop_bg_color: $bg_color;
-$backdrop_fg_color: mix($fg_color, $backdrop_bg_color, 80%);
-$backdrop_insensitive_color: lighten($backdrop_bg_color,15%);
-$backdrop_borders_color: mix($borders_color, $bg_color, 90%);
-$backdrop_dark_fill: mix($backdrop_borders_color,$backdrop_bg_color, 35%);
-
-// derived checked colors
+// checked state
 $checked_bg_color: if($variant=='light', darken($bg_color, 12%), lighten($bg_color, 18%));
 $checked_fg_color: if($variant=='light', darken($fg_color, 12%), lighten($fg_color, 18%));
 
-// derived hover colors
+// hover state
 $hover_bg_color: if($variant=='light', darken($bg_color, 8%), lighten($bg_color, 20%));
 $hover_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 20%));
 
-// derived active colors
+// active state
 $active_bg_color: if($variant=='light', darken($bg_color, 10%), lighten($bg_color, 22%));
 $active_fg_color: if($variant=='light', darken($fg_color, 10%), lighten($fg_color, 22%));
+
+// inset colour for high contrast
+$hc_inset_color: transparentize($fg_color, 0.7);

diff --git a/data/theme/gnome-shell-sass/widgets/_app-grid.scss b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
index 31d43829e988921ef21d347748a0cd07a701f607..1334a0674f6de445917a6a9e7c04397a86606261 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_app-grid.scss
+++ b/data/theme/gnome-shell-sass/widgets/_app-grid.scss
@@ -18,11 +18,12 @@ $app_icon_size: 96px;
 
 // Icon tiles in the app grid
 .app-well-app {
-  @include overview_icon($osd_fg_color);
+  @include overview_icon($system_fg_color);
 
   .overview-icon {
     padding: $base_padding*2;
     border-radius: $base_border_radius*3;
+    color: $system_fg_color;
   }
   .overview-icon.overview-icon-with-label {
     > StBoxLayout {
@@ -33,7 +34,7 @@ $app_icon_size: 96px;
 
 // app folders
 .app-well-app.app-folder {
-  @include overview_icon($fg_color, $flat: false);
+  @include overview_icon($system_fg_color, $flat: false);
 }
 
 // expanded folder
@@ -62,7 +63,7 @@ $app_icon_size: 96px;
     }
 
     /* FIXME: this is to keep the label in sync with the entry */
-    & .folder-name-label { padding: 5px 7px; color: $osd_fg_color; }
+    & .folder-name-label { padding: 5px 7px; color: $system_fg_color; }
 
     & .edit-folder-button {
       @extend %button;
@@ -100,7 +101,7 @@ $app_icon_size: 96px;
   width: 5px;
   border-radius:5px;
   margin-bottom: 8px;
-  background-color: $osd_fg_color;
+  background-color: $system_fg_color;
 }
 
 // Rename popup for app folders
@@ -130,8 +131,8 @@ $app_icon_size: 96px;
 
 // shutdown and other actions in the grid
 .system-action-icon {
-  background-color: rgba(0,0,0,0.8);
-  color: white;
+  background-color: transparentize($system_fg_color,.9);
+  color: $system_fg_color;
   border-radius: 99px;
   icon-size: $app_icon_size * 0.5;
   @if $is_highcontrast {
@@ -167,11 +168,14 @@ $app_icon_size: 96px;
   width: 24px;
   height: 24px;
   border-radius: 99px;
+
+  > StIcon { color: $system_fg_color;}
+
   @if $is_highcontrast {
-    @include button(normal, $osd_fg_color, transparentize($osd_bg_color, 0.5));
+    @include button(normal, $system_fg_color, transparentize($system_bg_color, 0.5));
   }
 
-  &:insensitive { @include button(undecorated, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
-  &:hover { @include button(hover, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
-  &:active { @include button(active, $osd_fg_color, transparentize($osd_bg_color, 0.5));}
+  &:insensitive { @include button(undecorated, $system_fg_color, transparentize($system_bg_color, 0.5));}
+  &:hover { @include button(hover, $system_fg_color, transparentize($system_bg_color, 0.5));}
+  &:active { @include button(active, $system_fg_color, transparentize($system_bg_color, 0.5));}
 }

diff --git a/data/theme/gnome-shell-sass/widgets/_calendar.scss b/data/theme/gnome-shell-sass/widgets/_calendar.scss
index df91dce5f3274d9574967e7762674a22d57667c8..39322162716b4dfbc329665563183120c859d5f7 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_calendar.scss
+++ b/data/theme/gnome-shell-sass/widgets/_calendar.scss
@@ -78,7 +78,7 @@
     &:hover {background-color: $hover_bg_color;}
     &:focus {
       background-color: mix($bg_color, $selected_bg_color, 80%);
-      color: $selected_fg_color;
+      color: inherit;
       box-shadow:inset 0 0 0 2px transparentize($selected_bg_color, 0.4);
     }
 
@@ -166,11 +166,11 @@
 
   .events-list {
     spacing: 2 * $base_padding;
+    color: $fg_color;
   }
 
   .events-title {
     @extend %heading;
-    color: $insensitive_fg_color;
     margin-bottom: $base_margin;
   }
 

diff --git a/data/theme/gnome-shell-sass/widgets/_dash.scss b/data/theme/gnome-shell-sass/widgets/_dash.scss
index 8f9b5e71396cb52fd97dadd7a40854e43f8469e9..4af0ab0da7e1d586391b7d420f02104e7fea12a8 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_dash.scss
+++ b/data/theme/gnome-shell-sass/widgets/_dash.scss
@@ -1,6 +1,8 @@
 /* Dash */
 
-$dash_background_color: lighten($system_bg_color, 5%);
+// uses system colors
+$dash_background_color: $system_overlay_bg_color;
+
 $dash_placeholder_size: 32px;
 $dash_padding: $base_padding*2; // 12px
 $dash_border_radius: $modal_radius + $dash_padding;
@@ -55,10 +57,11 @@ $dash_border_radius: $modal_radius + $dash_padding;
   }
 
   // show apps button
-  .show-apps { @include overview_icon($osd_fg_color);}
+  .show-apps { @include overview_icon($system_fg_color);}
 
   .show-apps, .app-well-app {
     padding-bottom: $dash_padding;
+    color: $system_fg_color;
   }
 }
 
@@ -66,7 +69,7 @@ $dash_border_radius: $modal_radius + $dash_padding;
 .dash-separator {
   width: 1px;
   margin: 0 $base_margin;
-  background-color: $borders_color;
+  background-color: $system_borders_color;
   margin-bottom: $dash_padding;
   @if $is_highcontrast {
     width: 2px;

diff --git a/data/theme/gnome-shell-sass/widgets/_entries.scss b/data/theme/gnome-shell-sass/widgets/_entries.scss
index ed65b7876041a954b66eed866ad70c1ba94ea476..a10546fa908c7b4b05b65c3b2c698de8cfaaffad 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_entries.scss
+++ b/data/theme/gnome-shell-sass/widgets/_entries.scss
@@ -16,6 +16,5 @@ StEntry {
 
   StLabel.hint-text {
     margin-left: 2px;
-    color: transparentize($fg_color, 0.3);
   }
 }

diff --git a/data/theme/gnome-shell-sass/widgets/_login-lock.scss b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
index cc67cb954f750082ebafdafbcf63f6c13a7e7134..212a2d3855c747964c496e480f3b69eed160696d 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_login-lock.scss
+++ b/data/theme/gnome-shell-sass/widgets/_login-lock.scss
@@ -1,5 +1,5 @@
 $_gdm_bg: $system_bg_color;
-$_gdm_fg: white;
+$_gdm_fg: $system_fg_color;
 $_gdm_dialog_width: 23em;
 
 // common style for gdm and lockscreen
@@ -19,12 +19,12 @@ $_gdm_dialog_width: 23em;
 
 // buttons
 .login-dialog-button {
-  @extend .button;
 
   &.cancel-button,
   &.switch-user-button,
   &.login-dialog-session-list-button {
     @extend .icon-button;
+    @extend %system_button;
   }
 
   &.cancel-button {
@@ -145,7 +145,9 @@ $_gdm_dialog_width: 23em;
   width: 26em;
 }
 
-.login-dialog-prompt-entry {}
+.login-dialog-prompt-entry {
+  @extend %system_entry;
+}
 
 
 /* Screen Shield */

diff --git a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
index adcc372d67e18468726dbca93c1537b4364297da..f351794de51cc6725aa53e3e79b339828de6d0cb 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
+++ b/data/theme/gnome-shell-sass/widgets/_looking-glass.scss
@@ -2,19 +2,21 @@
 
 // Dialog
 #LookingGlassDialog {
-  background-color: transparentize($bg_color,0.05);
+
+  @extend %osd_panel;
+  background-color: transparentize($osd_bg_color,0.02);
+  color: $osd_fg_color;
+
   border-radius: 0 0 $modal_radius $modal_radius;
-  border: 1px solid $outer_borders_color;
+
   border-top-width: 0;
-  color: $fg_color;
   padding: $base_padding;
   spacing: $base_padding;
   box-shadow: 0 2px 4px 0 $shadow_color;
 
   @if $is_highcontrast {
     border: 2px solid $hc_inset_color;
-    background-color: $bg_color;
-    border-top-width: 0;
+    background-color: $osd_bg_color;
     box-shadow:none;
   }
 
@@ -26,21 +28,21 @@
     spacing: $base_padding;
 
     .lg-toolbar-button {
+      @extend %osd_button;
       padding: $base_padding $base_padding*2;
-      @extend %button;
 
       & > StIcon { icon-size: $base_icon_size; }
     }
   }
 
-  .labels { 
+  .labels {
     spacing: $base_padding;
   }
 
   .notebook-tab {
+    @extend %osd_button;
     -natural-hpadding: $base_padding*2;
     -minimum-hpadding: $base_padding*2;
-    @extend %button;
     padding: $base_padding $base_padding*2;
   }
 
@@ -51,8 +53,8 @@
 .lg-dialog {
 
   StEntry {
+    @extend %osd_entry;
     min-height: 22px;
-    @extend %entry;
   }
 
   .shell-link {
@@ -118,9 +120,9 @@
 .lg-debug-flag-button {
   StLabel { padding: $base_padding, 2 * $base_padding; }
 
-  color: $fg_color;
-  &:hover { color: lighten($fg_color, 20%); }
-  &:active { color: darken($fg_color, 20%); }
+  color: $osd_fg_color;
+  &:hover { color: lighten($osd_fg_color, 20%); }
+  &:active { color: darken($osd_fg_color, 20%); }
 }
 
 .lg-debug-flags-header {

diff --git a/data/theme/gnome-shell-sass/widgets/_message-list.scss b/data/theme/gnome-shell-sass/widgets/_message-list.scss
index d0e5d8551ff9528e1ecd74c45c97317daff50941..9a9144b80dfeb3253dd42344ccc80a8bb23b63f3 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_message-list.scss
+++ b/data/theme/gnome-shell-sass/widgets/_message-list.scss
@@ -10,9 +10,9 @@
   &:ltr {margin-left: 0; margin-right: $base_margin; padding-right: $base_padding; border-right-width: 1px; }
   &:rtl {margin-right: 0; margin-left: $base_margin; padding-left: $base_padding; border-left-width: 1px; }
 
-  .message-list-placeholder { 
+  .message-list-placeholder {
     @extend %title_2;
-    color: transparentize($insensitive_fg_color, .5);
+    color: $insensitive_fg_color;
 
     // icon size and color
     > StIcon {
@@ -25,7 +25,7 @@
 
 .message-list-sections {
   spacing: $base_padding;
-  margin: 0; 
+  margin: 0;
   padding-bottom: $base_padding;
 
   // to account for scrollbar
@@ -117,14 +117,14 @@
   // close button
   .message-close-button {
     color: $fg_color;
-    background-color: transparentize($fg_color, 0.9);
+    background-color: transparentize($fg_color, 0.8);
     border-radius: 99px;
     padding: $base_padding - 1px;
     margin: 1px;
-    &:hover {background-color: transparentize($fg_color, 0.8);}
-    &:active {background-color: transparentize($fg_color, 0.9);}
+    &:hover {background-color: transparentize($fg_color, 0.7);}
+    &:active {background-color: transparentize($fg_color, 0.8);}
 
-    & StIcon { icon-size: $base_icon_size; }
+    > StIcon { icon-size: $base_icon_size; }
   }
 
   // body
@@ -154,7 +154,7 @@
     color: $fg_color;
   }
 
-  &:active { 
+  &:active {
     background-color: lighten($active_bg_color, 5%);
     color: $fg_color;
   }
@@ -165,7 +165,7 @@
       border-color: transparent;
     }
   }
-  
+
   // fix margin for last button
   &:last-child:ltr { margin-right: $base_margin*3; }
   &:last-child:rtl { margin-left: $base_margin*3; }

diff --git a/data/theme/gnome-shell-sass/widgets/_misc.scss b/data/theme/gnome-shell-sass/widgets/_misc.scss
index 0a98d570b904449dbc8a98b68b7d9626bbb12404..8c127de3ba82fa9cbdbaae12cb87b11fbb9c6c71 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_misc.scss
+++ b/data/theme/gnome-shell-sass/widgets/_misc.scss
@@ -30,7 +30,7 @@
 .flashspot { background-color: white; }
 
 // Hidden
-.hidden { color: rgba(0,0,0,0);}
+.hidden { color: transparent;}
 
 // Caps-lock warning
 .caps-lock-warning-label {

diff --git a/data/theme/gnome-shell-sass/widgets/_overview.scss b/data/theme/gnome-shell-sass/widgets/_overview.scss
index d8e70eaf227d1fc3d6240f2b7a5b96123071af21..301875e19cb9b71a91b9bb5f21d8acee06e6363e 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_overview.scss
+++ b/data/theme/gnome-shell-sass/widgets/_overview.scss
@@ -5,7 +5,7 @@
 }
 
 #overviewGroup {
-  background-color: $system_bg_color;
+  background-color: $system_base_color;
 }
 
 .overview-controls {

diff --git a/data/theme/gnome-shell-sass/widgets/_panel.scss b/data/theme/gnome-shell-sass/widgets/_panel.scss
index 487eb0f5bb56ab37e1de5d771d3da0be5450abe2..650d4fa8392539c989d76f3a6711408326541459 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_panel.scss
+++ b/data/theme/gnome-shell-sass/widgets/_panel.scss
@@ -1,8 +1,11 @@
 /* Top Bar */
 // a.k.a. the panel
 
-$panel_bg_color: #000;
-$panel_fg_color: if($variant == 'light', lighten($bg_color, 10%), darken($fg_color, 5%));
+$panel_bg_color: if($variant == 'light', $light_3, $dark_5);
+$panel_fg_color: if($variant == 'light', $fg_color, darken($fg_color, 5%));
+$panel_border_color: if($variant == 'light', darken($panel_bg_color, 2%), $panel_bg_color);
+
+$panel_system_fg_color: $system_fg_color; // always light for lockscreen, overview and other transparent panels
 $panel_height: 2.2em;
 $panel_transition_duration: 250ms; // same as the overview transition duration
 
@@ -12,12 +15,17 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   height: $panel_height;
   @extend %numeric;
   transition-duration: $panel_transition_duration;
+  box-shadow: inset 0 -1px 0 0  $panel_border_color;
 
   // transparent panel on lock & login screens
   &.unlock-screen,
   &.login-screen,
   &:overview {
     background-color: transparent;
+    box-shadow: none;
+    .panel-button {
+      color: $panel_system_fg_color !important;
+    }
   }
 
   // panel menus
@@ -141,13 +149,13 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
   &:overview {
     .panel-button {
       &:active, &:overview, &:focus, &:checked {
-        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
+        box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85);
 
         &.clock-display {
           box-shadow: none;
 
           .clock {
-            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.15);
+            box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.85);
           }
         }
 
@@ -160,11 +168,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
       }
 
       &:hover {
-        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
+        box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90);
         &.clock-display {
           box-shadow: none;
           .clock {
-            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.10);
+            box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.90);
           }
         }
 
@@ -177,11 +185,11 @@ $panel_transition_duration: 250ms; // same as the overview transition duration
       }
 
       &:active:hover, &:overview:hover, &:focus:hover, &:checked:hover {
-        box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
+        box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8);
         &.clock-display {
           box-shadow: none;
           .clock {
-            box-shadow: inset 0 0 0 100px rgba(255,255,255, 0.2);
+            box-shadow: inset 0 0 0 100px transparentize($panel_system_fg_color, 0.8);
           }
         }
 

diff --git a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
index d6b4e5a3d598c063e7ed7347d1b7f4c63a63a2b3..82a5e11aad58e7a599137497f9ac49c79b9c1df0 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
+++ b/data/theme/gnome-shell-sass/widgets/_quick-settings.scss
@@ -91,6 +91,11 @@
 
 .quick-toggle-menu {
   @include card;
+
+  // override some card styles
+  background-color: $bg_color !important;
+  color: $fg_color !important;
+
   border-radius: $base_border_radius*3;
   padding: $base_padding*2;
   margin: $base_padding*2 $base_padding*3 0;
@@ -108,7 +113,10 @@
       padding: 1.5 * $base_padding;
       background-color: transparentize($fg_color, 0.8);
 
-      &.active { background-color: $selected_bg_color;}
+      &.active {
+        background-color: $selected_bg_color;
+        color: $selected_fg_color;
+      }
     }
 
     & .title {

diff --git a/data/theme/gnome-shell-sass/widgets/_screenshot.scss b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
index 150f273b4256d216d70321fb9b9460989d33b2fa..039d977a358bf5d761b6b81d8dcc544876f92383 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_screenshot.scss
+++ b/data/theme/gnome-shell-sass/widgets/_screenshot.scss
@@ -33,7 +33,7 @@ $screenshot_ui_button_red: $error_color;
 }
 
 .screenshot-ui-type-button {
-  @extend %osd_button;
+  @extend %osd_button_flat;
   min-width: 48px;
   padding: $base_padding * 2 $base_padding * 3 !important;
   border-radius: $screenshot_ui_panel_border_radius - $screenshot_ui_panel_padding;
@@ -106,7 +106,7 @@ $screenshot_ui_button_red: $error_color;
 }
 
 .screenshot-ui-show-pointer-button {
-  @extend %osd_button;
+  @extend %osd_button_flat;
   border-radius: 99px;
   padding: $base_padding * 2 !important;
   StIcon { icon-size: $base_icon_size;}
@@ -129,7 +129,7 @@ $screenshot_ui_button_red: $error_color;
 .screenshot-ui-area-selector-handle {
   border-radius: 99px;
   background-color: white;
-  box-shadow: 0 1px 3px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 3px 2px $shadow_color;
   width: 24px;
   height: 24px;
 }

diff --git a/data/theme/gnome-shell-sass/widgets/_search-entry.scss b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
index 4ae86187f9ea2f1f78670b7747b29c4015e721d7..8b766ba0d7772591abc5e253b8f69ad777151aee 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_search-entry.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-entry.scss
@@ -5,6 +5,8 @@
   margin-bottom: $base_padding;
   width: 24em;
 
+  @extend %system_entry;
+
   .search-entry-icon {
     icon-size: $base_icon_size;
     margin-top: 2px; // center vertically

diff --git a/data/theme/gnome-shell-sass/widgets/_search-results.scss b/data/theme/gnome-shell-sass/widgets/_search-results.scss
index b7d72c9b64ab6794e3367799c7afd705b5599f2b..b281ba5b5014bb267d2a5b966c2e6ff96daa08ac 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_search-results.scss
+++ b/data/theme/gnome-shell-sass/widgets/_search-results.scss
@@ -23,22 +23,22 @@
 
 // content
 .search-section-content {
-  background-color: lighten($system_bg_color, 5%);
+  background-color: $system_overlay_bg_color;
+  color: $system_fg_color;
   border-radius: $modal_radius*1.5;
-  box-shadow:inset 0 0 0 1px solid $outer_borders_color;
-  color: $osd_fg_color;
   padding: $base_padding*2;
   margin:0 $base_margin*3;
 }
 
 %search_section_content_item {
-  @include tile_button($osd_fg_color);
+  @include tile_button($system_fg_color);
   border-radius: $base_border_radius+3px;
 }
 
 // "no results" text
 .search-statustext {
   @extend %title_1;
+  color: transparentize($system_fg_color, .2);
 }
 
 .grid-search-results {
@@ -64,7 +64,7 @@
     // provider labels
     .list-search-provider-details {
       width: 120px;
-      color: $osd_fg_color;
+      color: $system_fg_color;
     }
   }
 }
@@ -91,6 +91,6 @@
 
   // list item description
   .list-search-result-description {
-    color: $osd_insensitive_fg_color;
+    color: $system_insensitive_fg_color;
   }
 }

diff --git a/data/theme/gnome-shell-sass/widgets/_slider.scss b/data/theme/gnome-shell-sass/widgets/_slider.scss
index 500249aa52db5c85f6d4f0e22165c1ed72ae3510..40ac34652a1cf31c46ae1bbfca010459b169ed0b 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_slider.scss
+++ b/data/theme/gnome-shell-sass/widgets/_slider.scss
@@ -5,7 +5,7 @@ $slider_size: 16px;
 .slider {
   // slider trough
   -barlevel-height: 4px;
-  -barlevel-background-color: if($variant == 'light', transparentize($fg_color, 0.6), transparentize($fg_color, 0.8)); //background of the trough
+  -barlevel-background-color: transparentize($fg_color, 0.8); //background of the trough
   -barlevel-border-width: 2px; 
   -barlevel-border-color: transparent; // trough border color
   // fill style

diff --git a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
index 5136c3cfe199aba78b83c74d7a224fcc4aca7214..b7d8353e76b5bd4b4879b27b65484a56f449f790 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
+++ b/data/theme/gnome-shell-sass/widgets/_switcher-popup.scss
@@ -24,7 +24,7 @@ $switcher_padding: $base_padding*2;
 
   // each item in the list
   .item-box {
-    @include tile_button($osd_fg_color);
+    @include tile_button($fg_color);
     // override over style so mouse doesn't steal focus
     &:hover {background: none;}
     @if $is_highcontrast {

diff --git a/data/theme/gnome-shell-sass/widgets/_window-picker.scss b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
index 1847250b899f9de6355633171ce64d5e80ac757b..b46366a86fc90ccfd60f628ead8d4a9c758ca94e 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_window-picker.scss
+++ b/data/theme/gnome-shell-sass/widgets/_window-picker.scss
@@ -3,9 +3,9 @@
 $window_picker_spacing: $base_padding; // 6px
 $window_picker_padding: $base_padding * 2; // 12px
 
-$window_thumbnail_label_color: transparentize($osd_bg_color, 0.4);
+$window_thumbnail_label_color: transparentize($system_bg_color, 0.4);
 
-$window_close_button_color: transparentize(lighten($osd_bg_color, 7%), .02);
+$window_close_button_color: transparentize(lighten($system_bg_color, 7%), .02);
 $window_close_button_size: 30px;
 $window_close_button_padding: 3px;
 
@@ -23,7 +23,7 @@ $window_close_button_padding: 3px;
 // Close button
 .window-close {
   background-color: $window_close_button_color;
-  color: $osd_fg_color;
+  color: $system_fg_color;
   border-radius: 99px;
   box-shadow: 0 2px 4px 0 $shadow_color;
   padding: $window_close_button_padding;
@@ -50,5 +50,5 @@ $window_close_button_padding: 3px;
   // keep in sync with BACKGROUND_CORNER_RADIUS_PIXELS in workspace.js
   border-radius: 30px;
   background-color: $invisible_occluded_bg_color;
-  box-shadow: 0 4px 16px 4px transparentize(darken($osd_bg_color, 30%), 0.7);
+  box-shadow: 0 4px 16px 4px $shadow_color;
 }

diff --git a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
index ecbbc4113dd0eb0c874174e1bd0a8184b0c36564..9e58e921b7bf7bb7af7345514f70f15498adca1d 100644 (file)
--- a/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
+++ b/data/theme/gnome-shell-sass/widgets/_workspace-thumbnails.scss
@@ -7,7 +7,7 @@
   padding: $base_padding;
 
   .workspace-thumbnail {
-    color: $osd_fg_color;
+    color: $system_fg_color;
     background-color: lighten($system_bg_color, 10%);
     border-radius: $base_border_radius*0.5;
     border: 1px solid transparent;